<template>
    <div class="personalHome">
        <Personal-Header bgColor="#5741d9"></Personal-Header>
        <Personal-Side></Personal-Side>
        <div class="content el-container is-vertical">
            <h2 class="pagetitle">{{$t('l.personal_14')}}</h2>
            <div class="personCon el-main">
                <div class="infopanel">
                    <h2 class="persontitle">{{$t('l.personal_74')}}<a>{{$t('l.personal_75')}}</a></h2>
                    <div class="bindgooglecon" v-show="!isBind">
                        <div class="googlestep">
                            <h3 class="steptitle">{{$t('l.personal_76')}}</h3>
                            <p class="stepinfo">{{$t('l.personal_77')}}</p>
                            <p class="stepinfo">{{$t('l.personal_78')}}</p>
                            <div class="appdown clearfix">
                                <a href="http://itunes.apple.com/cn/app/google-authenticator/id388497605?mt=8"><img src="../../assets/images/stepimg1.png">App Store</a>
                                <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2"><img src="../../assets/images/stepimg2.png">Google Play</a>
                                <a href="https://shouji.baidu.com/software/22417419.html"><img src="../../assets/images/stepimg3.png">{{$t('l.personal_79')}}</a>
                            </div>
                        </div>
                        <div class="googlestep">
                            <h3 class="steptitle">{{$t('l.personal_80')}}</h3>
                            <p class="stepinfo">{{$t('l.personal_81')}}</p>
                            <p class="stepinfo red">{{$t('l.personal_82')}}</p>
                            <div class="keybox clearfix">
                                <div class="qrcode" id="qrcode">
                                </div>
                                <p>{{$t('l.personal_83')}}<input readonly v-model="key"></p>
                                <a href="#" v-clipboard:copy="key" v-clipboard:success="onCopy" v-clipboard:error="onError">{{$t('l.personal_38')}}</a>
                            </div>
                        </div>
                        <div class="googlestep">
                            <h3 class="steptitle">{{$t('l.personal_84')}}</h3>
                            <p class="title" style="padding-top:6px;">{{$t('l.personal_47')}}</p>
                            <div class="putgroup clearfix">
                                <input class="comput small" v-model="code" :placeholder="$t('l.personal_85')" style="width:100%;">
                                <p class="errortext"></p>
                            </div>
                        </div>
                        <a class="btn changebtn" @click="showpop">{{$t('l.personal_186')}}</a>
                    </div>  
                    <div class="bindgooglecon" v-show="isBind">
                        <div class="bindsuc">
                            <img src="../../assets/images/sucico.png">
                            <h2>{{$t('l.personal_86')}}！</h2>
                            <p>{{downtime}}{{$t('l.personal_72')}}</p>
                        </div>
                    </div>     
                </div>
            </div>
        </div>

        <!--安全校验-->
        <div class="popWraper" v-show="ischeck && status=='phone'">
            <div class="popInter">
                <div class="popHead">
                    <h2>{{$t('l.personal_42')}}</h2>
                    <i class="close" @click="ischeck = false"></i>
                </div>
                <div class="popbody">
                    <div class="popcon">
                        <p class="grouptitle">{{$t('l.personal_43')}}</p>
                        <input class="comput small disabled" v-model="account" disabled="disabled" style="width:100%;">
                        <div class="putgroup clearfix padtop">
                            <input class="comput small" :placeholder="$t('l.personal_44')" v-model="verifyCode" style="width:210px;">
                            <p class="errortext"></p>
                            <button v-show="sendAuthCode" class="codebtn active" @click="sendPhoneCode">{{$t('l.personal_45')}}</button>
                            <button v-show="!sendAuthCode" class="codebtn">{{auth_time}}s</button>
                        </div>
                        <a class="btn allcell" @click="bindGoogle">{{$t('l.personal_186')}}</a>
                    </div>
                </div>
            </div>
        </div>
        <!--邮箱校验-->
        <div class="popWraper"  v-show="ischeck && status=='email'">
            <div class="popInter">
                <div class="popHead">
                    <h2>{{$t('l.personal_42')}}</h2>
                    <i class="close" @click="ischeck = false;verifyCode=''"></i>
                </div>
                <div class="popbody">
                    <div class="popcon">
                        <p class="grouptitle">{{$t('l.personal_46')}}</p>
                        <input class="comput small disabled" disabled="disabled" v-model="account" style="width:100%;">
                        <div class="putgroup clearfix padtop">
                            <input class="comput small" :placeholder="$t('l.personal_44')" v-model="verifyCode" style="width:210px;">
                            <p class="errortext"></p>
                            <button v-show="sendAuthCode" class="codebtn active fr" @click="sendEmailCode">{{$t('l.personal_45')}}</button>
                            <button v-show="!sendAuthCode" class="codebtn">{{auth_time}}s</button>
                        </div>
                        <a class="btn allcell" @click="bindGoogle">{{$t('l.personal_186')}}</a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
import PersonalHeader from "@/components/personalHeader";
import PersonalSide from "@/components/personalSide";
import {api} from '@/api/api';
import QRCode from 'qrcodejs2'
// import VueClipboard from 'vue-clipboard2'
// Vue.use(VueClipboard)
export default {
    components: {
        PersonalHeader,
        PersonalSide,
    },
    data() {
        return {
            verifyCode:"",
            sendAuthCode:true,
            auth_time:120,
            ischeck:false,
            status:'phone',
            account:"",
            intro:"",
            key:"",
            qrCodeUrl:"",
            code:"",
            isBind:false,
            downtime:3,
            intro:"",
        }
    },
    created(){
        let intro = this.$store.state.userintro;
        if(intro.gaEnabled==1){
            this.status = "ga"
        }else if(intro.phoneEnabled==1){
            this.status = "phone"
        }else if(intro.emailEnabled==1){
            this.status = "email"
        }
        if(this.status=="phone"){
            this.account = this.$store.state.userintro.cellPhone
        }else if(this.status=="email"){
            this.account = this.$store.state.userintro.email
        }
    },
    methods:{
        // 复制成功
        onCopy(e){
            this.$layer.msg(this.$t('l.personal_48'));
        },
        // 复制失败
        onError(e){
            alert("失败");
        },
        getAuthCode() {
            this.sendAuthCode = false;
            this.auth_time = 120;
            var auth_timetimer =  setInterval(()=>{
                this.auth_time--;
                if(this.auth_time<=0){
                    this.sendAuthCode = true;
                    clearInterval(auth_timetimer);
                }
            }, 1000);
        }, 
        //发送邮箱验证码
        async sendEmailCode(){
            let that = this;
            let res = await api.sendEmailCode({
                email:that.account,
                type:"B"
            })
            if(res.data.code==0){
                that.$layer.msg(that.$t('l.personal_50'));
                that.getAuthCode();
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //发送手机验证码
        async sendPhoneCode(){
            let that = this;
            let res = await api.sendPhoneCode({
                areaCode:that.$store.state.userintro.phoneArea,
                phone:that.account,
                type:"B"
            })
            if(res.data.code==0){
                that.$layer.msg(that.$t('l.personal_50'));
                that.getAuthCode();
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //获取KEY
        async getKey(){
            let that = this;
            let res = await api.gaSecurityKey()
            if(res.data.code==0){
                that.key = res.data.data.gaKey;
                that.qrCodeUrl = res.data.data.qrCodeUrl;
                that.qrcode();
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        qrcode() {
            let that = this;
            let qrcode = new QRCode('qrcode', {
                width: 132,  
                height: 132,
                text: that.qrCodeUrl, // 二维码地址
                colorDark : "#000",
                colorLight : "#fff",
            })
        },
        //绑定谷歌
        async bindGoogle(){
            let that = this;
            let res = await api.bindaccount({
                account:that.code,
                areaCode:"",
                type:3,
                verifyCode:that.verifyCode
            })
            if(res.data.code==0){
                that.isBind = true;
                that.ischeck = false;
                that.$layer.msg(that.$t('l.personal_66'));
                var auth_timetimer =  setInterval(()=>{
                    that.downtime--;
                    if(that.downtime<=0){
                        clearInterval(auth_timetimer);
                        that.$router.push({
                            path: "/safeSetting"
                        });
                    }
                }, 1000);
                that.intro.gaEnabled = 1;
                localStorage.setItem("userintro",JSON.stringify(that.intro));
                that.$store.commit('changestate');
                
            }else if(res.data.code==12002){
                that.$layer.msg(that.$t('l.add_80'));
            }else if(res.data.code==1020003){
                that.$layer.msg(that.$t('l.add_87'));
            }else if(res.data.code==12004){
                that.$layer.msg(that.$t('l.add_79'));
            }else if(res.data.code==12005){
                that.$layer.msg(that.$t('l.add_86'));
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        showpop(){
            let that = this;
            if(that.code=="" || that.code.length<5){
                that.$layer.msg(that.$t('l.add_85'));
                return;
            }
            that.ischeck = true;
        }
    },
    mounted(){
        this.getKey();
    }
}
</script>
<style lang="less">
.personalHome {
	padding-top: 100px;
}
.personCon{
    padding:24px 30px;
    box-sizing: border-box;
    height: 90%;
    .infopanel{
        background:#fff;
        padding:40px 46px 46px 34px;
        min-height: 100%;
        box-sizing: border-box;
        .bindgooglecon{
            width:518px;
            margin:43px auto;
            .googlestep{
                padding-left:28px;
                position:relative;
                margin-left:-28px;
                margin-top:30px;
                &:first-child{
                    margin-top:0;
                }
                &:after{
                    content:"1";
                    position:absolute;
                    top:0;
                    left:0;
                    width:20px;
                    height:20px;
                    line-height:18px;
                    text-align:center;
                    color:#fff;
                    border-radius:25px;
                    background:#2D8DFE;
                    font-size:12px;
                }
                &:nth-child(2):after{
                    content:"2";
                }
                &:nth-child(3):after{
                    content:"3";
                }
                .steptitle{
                    font-size:16px;
                    font-weight:500;
                    color:rgba(51,56,94,1);
                    line-height:22px;
                    padding-bottom:9px;
                    font-familyA:"PingFangSC-Medium";
                }
                .stepinfo{
                    font-size:14px;
                    font-weight:400;
                    color:rgba(51,56,94,1);
                    line-height:20px;
                    padding-bottom:4px;
                    &.red{color:#EF5756;}
                }
                .appdown{
                    margin-top:11px;
                    a{
                        float:left;
                        width:140px;
                        height:40px;
                        line-height:40px;
                        text-align:center;
                        border:1px solid rgba(51,56,94,0.5);
                        border-radius:6px;
                        font-size:16px;
                        color:rgba(51,56,94,1);
                        font-familyA:"OpenSans";
                        margin-left:20px;
                        img{padding-right:10px;}
                        &:first-child{
                            margin-left:0;
                        }
                    }
                }
                .keybox{
                    padding-top:11px;
                    .qrcode{
                        float:left;
                        width:120px;
                        height:120px;
                        border-radius:6px;
                        border:1px solid rgba(51,56,94,0.5);
                        padding:10px;
                        box-sizing:border-box;
                        margin-right:15px;
                        img{
                            width:100%;
                        }
                    }
                    p{
                        float:left;
                        color:#33385E;
                        font-size:14px;
                        line-height:100%;
                        padding-top:50px;
                        input{color:#2D8DFE;padding-left:11px;background:none;border:none;outline:none;width: 180px;}
                    }
                    a{
                        float:left;
                        margin-top:45px;
                        margin-left:15px;
                        width:64px;
                        height:24px;
                        border-radius:4px;
                        border:1px solid rgba(51,56,94,0.5);
                        font-size:14px;
                        color:#33385E;
                        line-height:24px;
                        text-align:center;
                        cursor:pointer;
                    }
                }
            }
            .title{
                font-size:14px;
                font-weight:400;
                color:rgba(51,56,94,1);
                line-height:20px;
                padding-bottom:5px;
            }
            .changebtn{
                width:100%;
                height:40px;
                margin-top:50px;
                line-height:40px;
            }
        }
    }
}
</style>



